  <template>
  <!-- 会员用户管理 -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="89px"
    >
      <el-form-item label="类型名称" prop="memberTypeName">
        <el-select v-model="queryParams.memberTypeId" placeholder="请输入会员用户类型"  clearable>
        <el-option v-for="item in memberList" :key="item.id" :label="item.memberTypeName" :value="item.id" ></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="用户姓名" prop="memberUserRealName">
        <el-input
          v-model="queryParams.memberUserRealName"
          placeholder="请输入会员用户姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 新增按钮模块 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表数据展示 -->
    <el-table
      v-loading="loading"
      :data="menberList"
      :header-cell-class-name="'headerBg'"
      class="bold-header"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="index" width="55" align="center" />
      <!-- <el-table-column label="编号" align="center" prop="id" /> -->
      <el-table-column label="用户照片" align="center" width="80" >
        <template slot-scope="scope">
    <div style="padding-top: 100%; position: relative;">
      <!-- 图片回显 -->
      <ImagePreview :src="String(scope.row.memberUserPhoto)" style="position: absolute; top: 0; left: 0; bottom: 0; right: 0;"/>
    </div>
  </template>
      </el-table-column>
      <el-table-column label="会员卡卡号" align="center" prop="membershipCardNumber">
  <template slot-scope="scope">
    <span v-if="!scope.row.membershipCardNumber || scope.row.membershipCardNumber === ''">暂未绑定</span>
    <span v-else>{{ scope.row.membershipCardNumber }}</span>
  </template>
</el-table-column>
      <el-table-column label="会员真实姓名" align="center" prop="memberUserRealName" :show-overflow-tooltip="true"/>
      <el-table-column label="用户手机号" align="center" prop="memberUserPhone" :show-overflow-tooltip="true"/>
      <el-table-column label="会员性别" align="center" prop="memberUserSex">
        <template slot-scope="scope">
          <span v-if="scope.row.memberUserSex === 0">男</span>
          <span v-if="scope.row.memberUserSex === 1">女</span>
        </template>
      </el-table-column>
      <el-table-column label="会员卡名称" align="center" prop="memberTypeName" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true"/>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleSelect(scope.row)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改窗口 -->
    <el-dialog :title="title" :visible.sync="memberopen" width="550px" append-to-body>
  <el-form
    ref="addForm"
    :model="addForm"
    label-width="130px"
    :rules="rules"
    class="form-container"
    :inline="true"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item label="会员用户照片" prop="memberUserPhoto">
          <el-button type="primary" @click="openCamera">打开摄像头拍照</el-button>
          <br>
          <el-dialog :visible.sync="showCameraDialog" width="600px">
            <video width="550px" ref="video" autoplay></video>
            <canvas ref="canvas" style="display: none;"></canvas>
            <br>
            <el-button type="primary" @click="takePhoto">拍照</el-button>
          </el-dialog>

        </el-form-item>
      </el-col>
      <el-col :span="12">
        <img
            height="210"
            v-if="memberUserPhoto1"
            :src="memberUserPhoto1"
            class="avatar"
          />
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="会员用户名称" prop="memberUserRealName">
          <el-input
            v-model="addForm.memberUserRealName"
            placeholder="请输入会员用户名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="会员用户手机号" prop="memberUserPhone">
          <el-input
            v-model="addForm.memberUserPhone"
            placeholder="请输入会员用户手机号"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="会员用户性别" prop="memberUserSex">
          <el-select v-model="addForm.memberUserSex" placeholder="请输入会员用户性别">
            <el-option label="男" :value="0"></el-option>
            <el-option label="女" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="会员用户年龄" prop="memberUserAge">
          <el-input
            v-model="addForm.memberUserAge"
            placeholder="请输入会员用户年龄"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="会员用户身高(cm)" prop="memberUserHeight">
          <el-input-number
            v-model="addForm.memberUserHeight"
            placeholder="请输入会员用户身高"
            :min="100"
    :max="250"
    controls-position="right"
          >
            <template #append>cm</template>
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="会员用户体重(kg)" prop="memberUserWeight">
          <el-input-number
            v-model="addForm.memberUserWeight"
            placeholder="请输入会员用户体重"
            :min="30"
    :max="300"
    controls-position="right"
          >
            <template #append>kg</template>
          </el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="会员卡卡号" prop="membershipCardNumber">
          <el-input
            v-model="addForm.membershipCardNumber"
            placeholder="请输入会员卡卡号"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="会员卡名称" prop="memberTypeId">
          <el-select v-model="addForm.memberTypeId" placeholder="请输入会员卡名称" :disabled="isUpdateMode">
            <el-option v-for="item in memberList" :key="item.id" :label="item.memberTypeName" :value="item.id" @click="handleStatusChange(item.memberType)"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-if="statusChange && addForm.memberTypeId">
      <el-col :span="12">
        <el-form-item label="会员卡可用次数" prop="availableTimes">
          <el-input v-model="addForm.availableTimes" placeholder="请输入会员卡可用次数"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-if="!statusChange && addForm.memberTypeId">
      <el-col :span="12">
        <el-form-item label="会员卡有效期限" prop="serviceLife">
          <el-input v-model="addForm.serviceLife" placeholder="请输入会员卡有效期限"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <div class="button-container" style="text-align: right;">
      <el-button @click="cancelAll">取消</el-button>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </div>
  </el-form>
</el-dialog>

    <!-- 用户信息详情 -->
     <el-dialog  :visible.sync="isShow" width="40%" append-to-body>
      <div>
       <el-descriptions title="用户信息" class="margin-top"  :column="3" border >
        <el-descriptions-item>
      <template slot="label">
        用户头像
      </template>
      <ImagePreview class="image-preview" :src="String(userInfomationList.memberUserPhoto)"/>
    </el-descriptions-item>
        <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名
      </template>
      <span class="tooltip-text">{{ userInfomationList.memberUserRealName }}</span>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      {{userInfomationList.memberUserPhone}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        年龄
      </template>
      {{userInfomationList.memberUserAge}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        性别
      </template>
      {{ userInfomationList.memberUserSex === 0 ? '男' : '女' }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        身高
      </template>
      {{userInfomationList.memberUserHeight === 0 ? "暂无数据" : userInfomationList.memberUserHeight+"cm" }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        体重
      </template>
      {{userInfomationList.memberUserWeight === 0.00 ?  "暂无数据" : userInfomationList.memberUserWeight+"kg"}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        体脂率
      </template>
      {{userInfomationList.memberUserBodyFat=== 0.00 ? '暂无数据' : userInfomationList.memberUserBodyFat+"%"}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        开通时间
      </template>
      {{ userInfomationList.createTime }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        教练
      </template>
      {{ userInfomationList.invitationCode  === null ||userInfomationList.invitationCode === 'null' ? '暂无' : userInfomationList.coachName }}
    </el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="margin-top: 30px;">
      <el-descriptions title="会员信息"   :column="3"  border >
        <el-descriptions-item>
      <template slot="label">
        会员卡卡号
      </template>
      {{userInfomationList.membershipCardNumber === null ||userInfomationList.membershipCardNumber === '' ? '暂未绑定' : userInfomationList.membershipCardNumber }}
    </el-descriptions-item>
        <el-descriptions-item>
      <template slot="label">
        会员类型
      </template>
      {{userInfomationList.memberType === 0 ? '次卡' : '期限卡'}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        会员卡名称
      </template>
      {{userInfomationList.memberTypeName }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        {{userInfomationList.memberType === 0 ? '可用次数' : '到期时间'}}
      </template>
      {{userInfomationList.memberType === 0 ? userInfomationList.availableTimes+ '次' : userInfomationList.expirationTime}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        会员备注
      </template>
      {{userInfomationList.memberTypeRemarks}}
    </el-descriptions-item>
      </el-descriptions>
    </div>
     <div class="button-container" style="text-align: right;">
          <el-button type="primary" @click="cancell">确定</el-button>
        </div>
     </el-dialog>
    <!--分页效果-->
    <pagination
    v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
    >
    </pagination>
  </div>
</template>
<script>
// 在需要监听 WebSocket 数据的组件中
import { eventBus } from '@/main.js';
import { getMemberType,getById,addMember,updateMemberById,getMemberLists,selectUserInfoByNumid } from "@/api/memberUser/index";
import { Message } from "element-ui";
export default {
  data() {
    return {
      // 返回消息
      receivedMessage: '',
      // websocket连接
      ws: null,
      // 拍照弹出框
      showCameraDialog: false,
      // 租户标识
      venueUniqueIdentifier:'',
      // 详情信息回显
      userInfomationList:{},
      // 用户详情弹出框
      isShow: false,
      // 输入框只读状态
      isUpdateMode : false,
      // 下拉框状态
      statusChange: '',
      // 会员类型信息
      memberList: [],
      //添加时赋值
      addimages: "",
      // 图片回显
      memberUserPhoto1: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 表格数据
      menberList: [],
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        memberTypeName: '',
        memberUserRealName:'',
        // 第几页
        pageNum: 1,
        // 每页条数
        pageSize: 10,
        // 总条数
        total: 0,
      },
      // 总条数
      total: 0,
      // 当前页码
      currentPage4: 1,
      // 弹出层标题
      title: "",
      title1: "",
      // 是否显示弹出层
      memberopen: false,
      // 表单参数
      addForm: {
        memberType:'',
        membershipCardNumber:''
      },
      // 表单校验
      rules: {
        memberUserRealName: [{required: true, message: "请输入会员用户名称", trigger: "blur" },
        {max: 25, message: '最大字符为25', trigger: 'blur' }],
        memberTypeName: [
          { required: true, message: "请输入类型名称", trigger: "blur" },
        ],
        memberUserSex: [{required: true, message: "请选择性别", trigger: "blur"}],
        memberUserAge: [{ required: true, message: "请输入年龄", trigger: "blur" },
  {
    validator: (rule, value, callback) => {
      const age = parseInt(value);
      if (Number.isInteger(age) && age > 0) {
        callback();
      } else {
        callback(new Error('年龄必须为正整数'));
      }
    },
    trigger: "blur"
  }],
        memberUserPhone: [{validator: this.validatorPhone, trigger: "blur"}],
        memberTypeId: [{required: true, message: "请选择开通会员类型", trigger: "blur"}],
        availableTimes: [
  { required: true, message: "请输入次数", trigger: "blur" },
  {
    validator: (rule, value, callback) => {
      const times = parseInt(value);
      if (Number.isInteger(times) && times > 0) {
        callback();
      } else {
        callback(new Error('次数必须为正整数'));
      }
    },
    trigger: "blur"
  }
],
serviceLife: [
  { required: true, message: "请输入期限值", trigger: "blur" },
  {
    validator: (rule, value, callback) => {
      const life = parseInt(value);
      if (Number.isInteger(life) && life > 0) {
        callback();
      } else {
        callback(new Error('期限值必须为正整数'));
      }
    },
    trigger: "blur"
  }
]
      },
    };
  },
  created() {
    this.venueUniqueIdentifier = sessionStorage.getItem('venueUniqueIdentifier');
    this.getList();
    this.getMemberList();

     // 在页面进入时创建 WebSocket 连接
     this.ws = new WebSocket('ws://localhost:12222/ws');

      // 监听 WebSocket 连接打开事件
      this.ws.onopen = () => {
        console.log('WebSocket connected');
      };

      // 监听 WebSocket 收到消息事件
      this.ws.onmessage = (event) => {
        this.receivedMessage = event.data;
      };
  },
  watch: {
    // 监听下拉框是否变化
    'addForm.memberTypeId': function(newVal) {
      const selectedItem = this.memberList.find(item => item.id === newVal);
      if (selectedItem) {
      this.handleStatusChange(selectedItem.memberType);
    }
    },
    // 监听弹出框是否弹出
    memberopen(newVal) {
      this.$root.$memberOpen = newVal;
    },
    // 在 receivedMessage 变化时执行指定的方法
    receivedMessage(newVal) {
      this.handleReceivedMessage(newVal);
    }
  },
  beforeDestroy() {
    // 在页面销毁时关闭 WebSocket 连接
    this.ws.close();
  },
  mounted() {
    this.$root.$on('membershipCardNumberChanged', this.handleMembershipCardNumberChanged);
  },
  methods: {
    // websocket数据变化时进行查询
    handleReceivedMessage(message){
      const parsedMessage = JSON.parse(message);
      const { customValue, readResult } = parsedMessage;
     const venueUniqueIdentifier =customValue
     const membershipCardNumber = readResult
     selectUserInfoByNumid(venueUniqueIdentifier,membershipCardNumber).then((res) => {
     })
    },
    // 打开摄像头
    openCamera() {
    this.showCameraDialog = true;
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        const video = this.$refs.video;
        video.srcObject = stream;
        video.play();
      })
      .catch((error) => {
        console.log(error);
      });
  },
  // 拍照并调用方法处理
  takePhoto() {
    const canvas = this.$refs.canvas;
  const context = canvas.getContext('2d');
  const video = this.$refs.video;
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  const dataURL = canvas.toDataURL('image/jpeg');

  // 创建一个Blob对象来代表照片文件
  const blob = this.dataURLtoBlob(dataURL);
  blob.lastModifiedDate = new Date();
  blob.name = 'photo.jpg';

  // this.addForm.memberUserPhoto = blob; // 将照片文件赋值给表单字段
  // console.log(this.addForm.memberUserPhoto)
  this.beforeAvatarUpload(blob);
  this.showCameraDialog = false;
  },
  // 对拍到的照片进行处理
  dataURLtoBlob(dataURL) {
  const byteString = atob(dataURL.split(',')[1]);
  const mimeString = dataURL.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeString });
},
    handleMembershipCardNumberChanged(newValue) {
      if(this.memberopen === true && this.addForm.id === undefined){
          this.addForm.membershipCardNumber = newValue
      }
    },
     // 详情确认按钮
     cancell () {
      this.isShow = false
      this.userInfomationList={}

    },
     // 验证手机号格式，其他用户是否绑定
     validatorPhone (memberUserPhone, value, callback) {
      // 验证手机号的正则表达式
      const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/
      if (value !== '') {
        if (!reg.test(value)) {
          callback(new Error('输入正确手机号'))
        } else {
            callback()
        }
      } else {
        callback()
      }
    },
    // 详情显示
    handleSelect(row) {
      this.title1 = "用户信息"
      this.handleFind(row)
      this.isShow = true
    },
    // 判断下拉框
    handleStatusChange(memberType) {
      this.statusChange = memberType === 0;
      this.addForm.memberType = memberType
    },
    // 会员类型下拉框选项
     getMemberList() {
      getMemberLists(this.venueUniqueIdentifier).then((res) => {
        this.memberList = res.data.data
      })
     },
     // 文件上传校验
     beforeAvatarUpload(file) {
      //上传图片格式
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是JPG/PNG格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2MB!");
        return false;
      }
      //赋值
      this.addimages = file;
      this.memberUserPhoto1 = URL.createObjectURL(file);
      //isJPG && isLt2M 自动提交 false 是点击确定后提交
      return false;
    },
    // 模糊查询操作
    handleQuery() {
      const that = this;
      this.getList()
    },
    // 全查操作
    getList() {
      const that = this;
      this.loading = true;
      this.queryParams.venueUniqueIdentifier = this.venueUniqueIdentifier
      getMemberType(this.addDateRange(this.queryParams))
        .then((res) => {
          this.menberList = res.data.content;
          this.total = res.data.totalSize;
          this.loading = false;
        });
    },
    // 查询一条操作
    handleFind(row) {
      this.title = "查看会员类型信息";
      this.loading = true;
      this.shaoSaveButton = false;
      const id =row.id
      const venueUniqueIdentifier = this.venueUniqueIdentifier
      getById(id,venueUniqueIdentifier).then((res) => {
          this.addForm = res.data;
          this.memberUserPhoto1 = process.env.VUE_APP_IMG_BASE_URL + res.data.memberUserPhoto
          this.loading = false;
          this.userInfomationList = res.data
          if(this.addForm.memberType === 0 && this.addForm.availableTimes !== 0){
          this.isUpdateMode = true;
        }
        else if(this.addForm.memberType === 1 && this.addForm.expirationTime){
          const expirationTime = Date.parse(this.addForm.expirationTime); // 将日期字符串转换成时间戳
          const now = Date.now(); // 获取当前时间的时间戳
          if (expirationTime > now){
            this.isUpdateMode = true;
          }
        }else{
          this.isUpdateMode=false
        }
        });
    },
    // 修改按钮操作
     handleUpdate(row) {
      this.addForm={}
        this.handleFind(row);
        this.title = "修改会员信息";
        this.memberopen = true;
    },
    // 删除
    handleDelete(row) {
      const that = this;
      if(row.enableStatus === 0){
        Message.error("该会员信息正在启用，无法进行删除操作！！！");
      }else{
      this.$confirm("此操作将永久删除该类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delMember(row.id,row.venueUniqueIdentifier)
            .then((res) => {
              this.$message({ type: "success", message: "删除成功" });
              that.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      }
    },
    // 提交按钮
    submitForm() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          if(this.addForm.memberUserHeight === undefined || this.addForm.memberUserHeight === null){
              this.addForm.memberUserHeight = 0
            }
            if(this.addForm.memberUserWeight === undefined || this.addForm.memberUserWeight === null){
              this.addForm.memberUserWeight = 0.00
            }
           // 校验通过，执行添加修改操作
           for (const key in this.addForm) {
                formData.set(key, this.addForm[key]);
                formData.get(key);
          }
          if (this.addForm.memberUserPhoto === "" || this.addForm.memberUserPhoto === null || this.addForm.memberUserPhoto === undefined){
            formData.set("memberUserPhoto",0);
          }
          if (this.addForm.serviceLife === "" || this.addForm.serviceLife === null || this.addForm.serviceLife === undefined){
            formData.set("serviceLife",0)
          }
          if (this.addimages) {
            formData.set("file", this.addimages, this.addimages.name);
          }else{}
          formData.set("venueUniqueIdentifier",this.venueUniqueIdentifier)
          console.log("图片"+this.addimages.name)
          if (this.addForm.id) {
            // 修改方法
            updateMemberById(
              formData
              )
              .then((res) => {
                if (res.data.data === "UPDATE_OK") {
                  this.$message({ type: "success", message: "修改成功" });
                  // 关闭窗口
                  this.memberopen = false;
                  this.memberUserPhoto1 = ""
                  this.addimages = ""
                  //刷新
                  this.getList();
                }else if(res.data.data === "FILE_EMPTY"){
                  this.$message.error({ type: "warning", message: "图片不能为空" });
                }  else if(res.data.data === "手机号已存在"){
                  this.$message.error({ type: "warning", message: "手机号已存在" });
                }   else if(res.data.data === "存在空内容"){
                  this.$message.error({ type: "warning", message: "存在空内容" });
                }  else if(res.data.data === "UPDATE_ERROR"){
                  this.$message.error({ type: "warning", message: "修改失败" });
                }
              }).catch((error) =>{
                console.log(error)
              });
          } else {
             // 将memberType添加到formData中
            formData.set('memberType', this.addForm.memberType);
            addMember(formData)
              .then((res) => {
                if(res.data.data === "SAVE_OK"){
                  this.$message({ type: "success", message: "添加成功" });
                  this.memberUserPhoto1 = ""
                  this.addimages = ""
                  // 关闭窗口
                  this.memberopen = false;
                  //刷新
                  this.getList();
                } else if(res.data.data === "FILE_EMPTY"){
                  this.$message.error({ type: "warning", message: "图片不能为空" });
                }  else if(res.data.data === "手机号已存在"){
                  this.$message.error({ type: "warning", message: "手机号已存在" });
                }   else if(res.data.data === "存在空内容"){
                  this.$message.error({ type: "warning", message: "存在空内容" });
                }  else if(res.data.data === "SAVE_ERROR"){
                  this.$message.error({ type: "warning", message: "添加失败" });
                }
              }).catch((error) =>{
                console.log(error)
              });
          }
        }
      });
    },
    // 取消按钮
    cancelAll() {
      this.memberopen = false;
    },
    // 新增按钮操作
    handleAdd() {
      // 清除表单数据
      if (this.$refs.addForm !== undefined) {
        this.$refs.addForm.resetFields();
      }
      this.memberopen = true;
      this.addForm = {
        membershipCardNumber:'',
        memberUserPhoto:''
      }
      this.title = "添加会员类型";
      this.memberUserPhoto1 = ""
      this.addimages = ""
      this.addForm.memberType = '';
      this.isUpdateMode =false

    },
    // 启用禁用状态按钮
    toggleDisableStatus(row) {
      const id = row.id;
      const enableStatus = row.enableStatus;
      if(row.enableStatus === 1){
        updateEnableStatus(
          id,
          enableStatus,
       )
        .then((res) => {
          this.$message({ type: "error", message: "禁用成功" });
          this.getList();
          // 处理成功
        });
      }else{
        updateEnableStatus(
          id,
          enableStatus,
        )
        .then((res) => {
          this.$message({ type: "success", message: "启用成功" });
          this.getList();
          // 处理成功
        });
      }

    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.lid);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 分页每页条数显示
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
      console.log(`每页 ${val} 条`);
    },
    // 分页当前页显示
    handleCurrentChange(val) {
      this.currentPage4 = val;
      this.queryParams.pageNum = val;
      this.getList();
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style>
.headerBg {
  background: #eee !important;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }

.bold-header .el-table__header th {
  font-weight: bold;
}
.button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 设置图片的最大宽度和最大高度 */
.image-preview img {
  width: 40px;
  height: 40px;
  max-width: 100%; /* 图片的最大宽度为父元素的宽度 */
  max-height: 100%; /* 图片的最大高度为父元素的高度 */
  object-fit: cover; /* 保持图片比例并填充整个容器 */
}
.tooltip-text {
  display: inline-block;
  max-width: 5em; /* 设置为最大显示5个字符的宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

.tooltip-text:hover::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  z-index: 999;
}
</style>
